<template>
  <div>
    <!-- 替车记录 -->
    <div class="card-wrap flex-column justify-end card-padding">
      <el-form :model="form" ref="historicalRecord">
        <div class="card-title-wrap">
          <span>替车记录</span>
          <span></span>
        </div>
        <el-timeline style="margin-top: 30px">
          <el-timeline-item :timestamp="`操作时间：${item.updateTime}`" placement="top" v-for="(item, index) in form.recordList" :key="index">
            <div class="flex-column timeline-wrap">
              <span style="margin-bottom: 10px; margin-top: 10px">客户名称：{{ item.customerName | filterNull }}</span>
              <span style="margin-bottom: 10px">替车分类：{{ item.replacementCarTypeStr | filterNull }}</span>
              <span style="margin-bottom: 10px">替车时间：{{ item.replacementCarStartTime | filterNull }} 至 {{ item.replacementCarEndTime | filterNull }}</span>
              <span style="margin-bottom: 10px">替车车牌号：{{ item.replacementCarNo | filterNull }}</span>
              <span style="margin-bottom: 10px">司机名称：{{ item.driverName | filterNull }}</span>
              <span style="margin-bottom: 10px">付款方式：{{ item.paymentMethodsStr | filterNull }}</span>
              <span
                >业务单号：<span style="color: #409eff; cursor: pointer" @click="goToDetail(item, item.replacementCode)">{{ item.replacementCode | filterNull }}</span></span
              >
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'historicalRecord',
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: '',
    },
  },
  computed: {
    form: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
    type() {
      let status
      switch (this.state) {
        case 'write':
          status = 'edit'
          break
        case 'disabled':
          status = 'detail'
          break
        case 'readonly':
          status = 'detail'
          break
        case 'detail':
          status = 'detail'
          break
        case 'edit':
          status = 'edit'
        case 'add':
          status = 'add'
          break
      }
      return status
    },
  },
  data() {
    return {}
  },
  created() {},
  methods: {
    goToDetail(item, replacementCode) {
      if (!replacementCode) return
      this._toPage({
        path: '/workflow/examine/details',
        name: 'Details',
        query: {
          processId: item.flowId,
          flag: '1',
          status: 'readonly',
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.box-wraps:after {
  content: '';
  display: block;
  clear: both;
  width: 32%;
}
</style>
